
<div style="POSITION: relative" id="content">
  <h3>启用DataGrid行内编辑器</h3>
  <div id="article_content" class="article_content">
    <p>可编辑的功能是最近添加到<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">datagrid的,它可以使用户添加一个新行到datagrid,用户也可以更新一个或多个行.</span></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">这个教程向你展示如何创建一个<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">datagrid 和内联编辑器.</span></span></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><img src="documentation/images/1344589732_7660.png" alt=""><br>
      </span></span></p>
<h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 创建 DataGrid</h4>
    <pre name="code" class="javascript">$(function(){  
    $('#tt').datagrid({  
        title:'Editable DataGrid',  
        iconCls:'icon-edit',  
        width:660,  
        height:250,  
        singleSelect:true,  
        idField:'itemid',  
        url:'datagrid_data.json',  
        columns:[[  
            {field:'itemid',title:'Item ID',width:60},  
            {field:'productid',title:'Product',width:100,  
                formatter:function(value){  
                    for(var i=0; i&lt;products.length; i++){  
                        if (products[i].productid == value) return products[i].name;  
                    }  
                    return value;  
                },  
                editor:{  
                    type:'combobox',  
                    options:{  
                        valueField:'productid',  
                        textField:'name',  
                        data:products,  
                        required:true  
                    }  
                }  
            },  
            {field:'listprice',title:'List Price',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}},  
            {field:'unitcost',title:'Unit Cost',width:80,align:'right',editor:'numberbox'},  
            {field:'attr1',title:'Attribute',width:150,editor:'text'},  
            {field:'status',title:'Status',width:50,align:'center',  
                editor:{  
                    type:'checkbox',  
                    options:{  
                        on: 'P',  
                        off: ''  
                    }  
                }  
            },  
            {field:'action',title:'Action',width:70,align:'center',  
                formatter:function(value,row,index){  
                    if (row.editing){  
                        var s = '&lt;a href=&quot;#&quot; onclick=&quot;saverow('+index+')&quot;&gt;Save&lt;/a&gt; ';  
                        var c = '&lt;a href=&quot;#&quot; onclick=&quot;cancelrow('+index+')&quot;&gt;Cancel&lt;/a&gt;';  
                        return s+c;  
                    } else {  
                        var e = '&lt;a href=&quot;#&quot; onclick=&quot;editrow('+index+')&quot;&gt;Edit&lt;/a&gt; ';  
                        var d = '&lt;a href=&quot;#&quot; onclick=&quot;deleterow('+index+')&quot;&gt;Delete&lt;/a&gt;';  
                        return e+d;  
                    }  
                }  
            }  
        ]],  
        onBeforeEdit:function(index,row){  
            row.editing = true;  
            updateActions();  
        },  
        onAfterEdit:function(index,row){  
            row.editing = false;  
            updateActions();  
        },  
        onCancelEdit:function(index,row){  
            row.editing = false;  
            updateActions();  
        }  
    });  
});  
function updateActions(){  
    var rowcount = $('#tt').datagrid('getRows').length;  
    for(var i=0; i&lt;rowcount; i++){  
        $('#tt').datagrid('updateRow',{  
            index:i,  
            row:{action:''}  
        });  
    }  
}  </pre>
    启用编辑在<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">datagrid,你应该添加一个<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">editor 属性到列中,<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">editor
    告诉<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">datagrid 如何编辑字段和如何保存字段&#20540;,正如你所建议的我们定义的三个<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">&nbsp;editor:text,combobox
    and checkbox.</span></span></span></span></span><br>
    <pre name="code" class="javascript">function editrow(index){  
    $('#tt').datagrid('beginEdit', index);  
}  
function deleterow(index){  
    $.messager.confirm('Confirm','Are you sure?',function(r){  
        if (r){  
            $('#tt').datagrid('deleteRow', index);  
        }  
    });  
}  
function saverow(index){  
    $('#tt').datagrid('endEdit', index);  
}  
function cancelrow(index){  
    $('#tt').datagrid('cancelEdit', index);  
}  </pre>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载 EasyUI示例代码:</h4>
    <div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px"> <a href="http://jquery-easyui.googlecode.com/svn/trunk/share/tutorial/datagrid/easyui-datagrid-demo12.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-datagrid-demo.zip</a></div>
    <br>
    <br>
    <p></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><br>
      </span></span></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><br>
      </span></span></p>
    <p><br>
    </p>
  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>